<template>
	<div id="travelDitails">
		<div id="travelDitails-head">
            <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="/"><i class="el-icon-s-home"></i></el-menu-item>
                <el-menu-item index="1">目的地攻略</el-menu-item>
                <el-menu-item index="2">游记</el-menu-item>
                <el-menu-item index="3">问答</el-menu-item>
                <el-menu-item index="4">当地向导</el-menu-item>
                <el-menu-item index="/MyHomePage">我的主页</el-menu-item>
            </el-menu>
        </div>
		<div>
			<el-container>
				<el-header class="travelDitails-herder" height="400px"> 
					<div class="travelDitails_UserDiv" v-for="(o,index) in travelDitailsData" :key="index">
						<div  class="travelDitails_Card">
							<p>
								<font size="5px">{{o.title}}</font>
							</p>
						</div>
						<div class="travelDitails_UserCard">
							<div class="travelDitails_userDiv">
								<el-avatar :src='`http://127.0.0.1:8082/getImageById?id=${o.avatarId}`' ></el-avatar>
								<span >
									<font size="4px" class="traveDitalis_UserFont">{{o.author}}</font>
								</span>
							</div>
						</div>
					</div>
					<img :src='`http://127.0.0.1:8082/getImageById?id=${this.coverId}`' mode="widthFix" class="travelDitails_image" >
				</el-header>
				<el-container class="treaveDitiails_container">
					<el-aside class="treavelDitiails-aside" width="960px" v-for="(o,index) in travelDitailsData" :key="index">
						<div class="travelDitails-richText" style="width: 100%;overflow: hidden;" v-html="o.textContent"></div>
					</el-aside>
					<el-aside class="treavelDitiails-rightAside" width="320px">以下内容-有待添加</el-aside>
				</el-container>
				<button class="top" @click="toTop">^</button>
			</el-container>
		</div>
		<div>
			<p class="travelDitails_endP">~THE END~</p>
		</div>
		<div class="comment_detailsDiv">
			<!-- 评论 -->
			<div class="comment_div">
				<div>
					<h1 class="comment_h1">评论</h1>
				</div>
				<div class="comment_publishDiv">
					<el-row style="margin-top:40px">
						<el-form ref="form" :model="commentList" label-width="80px" >
							<div class="comment_imageDiv">
								<img :src='`http://127.0.0.1:8082/getImageById?id=${this.userAvatarId}`' class="comment_image">
							</div>
							<el-form-item label="" class="comment_el_from_item">
								<el-input type="textarea" placeholder="请输入内容" v-model="commentList.commentContent" maxlength="1000" show-word-limit></el-input>
							</el-form-item>
							<div>
								<el-button type="primary" @click="savaComment" style="margin-left:90px">发布评论</el-button>
							</div>
						</el-form>
					</el-row>
				</div>
				<div class="comment_StyleDiv">
					<el-row v-for="(comment,index) in commentAllList" :key="index">
						<div class="comment_commentDiv">
							<img :src='`http://127.0.0.1:8082/getImageById?id=${comment.avatarId}`' class="comment_commentImage" >
							<span class="comment_span">
								<font size="2px" style="float:left">{{comment.userName}}</font>
							</span>
							<div class="comment_styleDiv">
								<font size="3px" class="comment_contentFont">{{comment.commentContent}}</font>
							</div>
							<span class="comment_publishSpan" >
								<font size="2px" class="comment_publishFont" >发表于：{{comment.createTime}}</font>
							</span>
							<span class="comment_reportSpan"  >
								<span class="comment_deleteSpan"  @click="open">
									<font style="margin-left:10px">举报</font>
								</span>
								<span class="" style="color:#409EFF"  @click="openReplyByFirst(comment)" >
									<font style="margin-left:10px">回复</font>
								</span>
								<!-- <el-button type="text" @click="open" >举报</el-button>
								<el-button type="text" @click="openReplyByFirst(comment)">回复</el-button> -->
								<span class="" style="color:#409EFF" v-if="comment.userId == userId"  @click="deleteComment(comment)">
									<font style="margin-left:10px">删除</font>
								</span>
							</span>
							<!-- 子评论 -->
							<div v-for="item in comment.childs" :key="item.id" class="comment_replyDiv"  >
								<img :src='`http://127.0.0.1:8082/getImageById?id=${item.avatarId}`' class="comment_commentImage" >
								<span class="comment_span">
									<font size="2px" style="float:left">{{item.userName}}<span v-if="item.replyId !== comment.userId">回复于:{{item.replyName}}</span></font>
								</span>
								<div class="comment_replyStyleDiv">
									<font size="3px" class="comment_contentFont">{{item.commentContent}}</font>
								</div>
								<span class="comment_replyPublishSpan" >
									<font size="2px" class="comment_publishFont" >发表于：{{item.createTime}}</font>
								</span>
								<span class="comment_replyReportSpan"  >
									<span class="comment_deleteSpan"  @click="open">
										<font style="margin-left:10px">举报</font>
									</span>
									<span class="" style="color:#409EFF" @click="openReplyBySecond(item)" >
										<font style="margin-left:10px">回复</font>
									</span>
									<!-- <el-button class="comment_deleteSpan" type="text" @click="open" >举报</el-button>
									<el-button class="comment_deleteSpan" type="text" @click="openReplyBySecond(item)">回复</el-button> -->
									<span class="" style="color:#409EFF" v-if="item.userId == userId"  @click="deleteReply(item)">
										<font style="margin-left:10px">删除</font>
									</span>
								</span>
							</div>
						</div>
					</el-row>
				</div>
			</div>
		</div>
		<!-- 分页 -->
		<!-- <div class="block">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-size="page.pageSize"
				layout="prev, pager, next, jumper"
				:total="page.total">
			</el-pagination>
		</div> -->
		<!-- 二级回复框 -->
		<div class="reply_div" v-if="replyCommentSecond">
			<div>
				<h2 class="reply_h2">回复评论</h2>
			</div>
			<el-form ref="form" :model="replySecondList" label-width="80px" >
				<div class="comment_imageDiv">
					<img :src='`http://127.0.0.1:8082/getImageById?id=${this.userAvatarId}`' class="comment_image">
				</div>
				<el-form-item label="" class="comment_el_from_item">
					<el-input type="textarea" placeholder="请输入内容" v-model="replySecondList.commentContent" maxlength="1000" show-word-limit></el-input>
				</el-form-item>
				<div>
					<el-button  @click="replyCommentSecond = false" style="margin-left:90px">取消回复评论</el-button>
					<el-button type="primary" @click="savaReplySecond" style="margin-left:610px">发布回复评论</el-button>
				</div>
			</el-form>
		</div>
		<!-- 一级回复框 -->
		<div class="reply_div" v-if="replyCommentFirst">
			<div>
				<h2 class="reply_h2">回复评论</h2>
			</div>
			<el-form ref="form" :model="replyFirstList" label-width="80px" >
				<div class="comment_imageDiv">
					<img :src='`http://127.0.0.1:8082/getImageById?id=${this.userAvatarId}`' class="comment_images">
				</div>
				<el-form-item label="" class="comment_el_from_item">
					<el-input type="textarea" placeholder="请输入内容" v-model="replyFirstList.commentContent" maxlength="1000" show-word-limit></el-input>
				</el-form-item>
				<div>
					<el-button  @click="replyCommentFirst = false" style="margin-left:90px">取消回复评论</el-button>
					<el-button type="primary" @click="savaReplyFirst" style="margin-left:610px">发布回复评论</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
const axios = require('axios')
	export default {
	name: 'travelDitails',
		data () {
			return {
				// 回复评论默认为隐藏
				reply: false,
				// 分页对象
				page: {
					pageSize: 10,
					pageNum: 1,
					total: 0
				},
				// 新增二级回复评论集合
				replySecondList:{
					id:'',
					commentContent:'',
					avaterId:'',
					userName:'',
					travelsId:'',
					userId:'',
					delFlag:0,
					parentId:'',
					replyName:'',
					travelsName:'',
					replyId:'',
				},
				// 新增一级回复评论集合
				replyFirstList:{
					id:'',
					commentContent:'',
					avaterId:'',
					userName:'',
					travelsId:'',
					userId:'',
					travelsName:'',
					delFlag:0,
					parentId:'',
					replyName:'',
					replyId:'',
				},
				// 新增评论集合
				commentList:{
					id:'',
					commentContent:'',
					avaterId:'',
					userName:'',
					travelsId:'',
					userId:'',
					travelsName:'',
					delFlag:0,
					parentId:'',
				},
				// 用户信息集合
				userAllList:[],
				// 登录名称
				loginName: '',
				// 封面id
				coverId: '',
				// 游记详细信息集合
				travelDitailsData:[],
				//默认选择第二游记
				activeIndex: '2',
				// 游记id
				id:'',
				// 游记浏览量
				views:'',
				// 用户头像id
				userAvatarId:'',
				// 评论全查集合
				commentAllList:'',
				// 统计评论总数
				commentTotal:'',
				// 用户id
				userId:'',
				// 评论id
				commentId:'',
				// 二级默认回复框隐藏
				replyCommentSecond: false,
				// 一级默认回复框隐藏
				replyCommentFirst: false,
				//一级回复父id
				parentIdFirst:'',
				//一级被回复人名称
				replyNameFirst:'',
				//一级被回复人idw
				replyIdFirst:'',
				//二级回复父id
				parentIdSecond:'',
				//二级被回复人名称
				replyNameSecond:'',
				//二级被回复人id
				replyIdSecond:'',
				//游记标题
				travelsTitle:'',
			}
		},
	mounted(){
		// 从头部获取登录名称
		this.loginName = window.sessionStorage.getItem('loginName')
		// 从头部获取用户id
		this.userId = window.sessionStorage.getItem('id')
		// 从头部获取用户头像id
		this.userAvatarId = window.sessionStorage.getItem('avatarId')
		// 根据id查询游记详细信息
		this.getToueNoteById()
		//点击时返回顶部
		this.$router.afterEach((to,form,next)=>{
			window.scrollTo(0,0)
		})
		// 根据游记id全查评论信息
		this.getCommentAllByTravesId()
	},
	methods: {
		// 新增二级回复评论
		savaReplySecond(){
			this.userName = window.sessionStorage.getItem('userName')
			this.travelId = window.sessionStorage.getItem('id')
			var formdata = new FormData()
			formdata.set('commentContent', this.replySecondList.commentContent)
			formdata.set('userName', this.userName)
			formdata.set('travelsId', this.id)
			formdata.set('avatarId', this.userAvatarId)
			formdata.set('userId', this.userId)
			formdata.set('parentId', this.parentIdSecond)
			formdata.set('replyName', this.replyNameSecond)
			formdata.set('replyId', this.replyIdSecond)
			formdata.set('travelsName', this.travelsTitle)
			axios.post('http://127.0.0.1:8082/comment/saveReplySecond', formdata).then((res) => {
				if (res.data.obj > 0) {
					this.message('恭喜你，评论回复成功！', 'success')
					// 初始化评论查询方法
					this.getCommentAllByTravesId()
					this.replyCommentSecond = false
					this.replySecondList = {
					}
				} else {
					this.message('对不起，评论回复失败！', 'warning')
				}
			})
		},
		// 新增一级回复评论
		savaReplyFirst(){
			this.userName = window.sessionStorage.getItem('userName')
			this.travelId = window.sessionStorage.getItem('id')
			var formdata = new FormData()
			formdata.set('commentContent', this.replyFirstList.commentContent)
			formdata.set('userName', this.userName)
			formdata.set('travelsId', this.id)
			formdata.set('avatarId', this.userAvatarId)
			formdata.set('userId', this.userId)
			formdata.set('parentId', this.parentIdFirst)
			formdata.set('replyName', this.replyNameFirst)
			formdata.set('replyId', this.replyIdFirst)
			formdata.set('travelsName', this.travelsTitle)
			axios.post('http://127.0.0.1:8082/comment/saveReplyFirst', formdata).then((res) => {
				if (res.data.obj > 0) {
					this.message('恭喜你，评论回复成功！', 'success')
					// 初始化评论查询方法
					this.getCommentAllByTravesId()
					this.replyCommentFirst = false
					this.replyFirstList = {
					}
				} else {
					this.message('对不起，评论回复失败！', 'warning')
				}
			})
		},
		// 回复二级评论时回复框
		openReplyBySecond(item){
			this.parentIdSecond = item.parentId
			this.replyNameSecond = item.userName
			this.replyIdSecond = item.userId
			this.replyCommentSecond = true
		},
		// 回复一级评论时打开回复框
		openReplyByFirst(comment){
			this.parentIdFirst = comment.id
			this.replyNameFirst = comment.userName
			this.replyIdFirst = comment.userId
			this.replyCommentFirst = true
		},
		//删除二级评论信息
		deleteReply(item){
			this.$confirm(
				'此操作将删除您的评论信息，是否继续操作？',
				'提示',
				{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				} // 删除提示框
			)
			.then(() => {
			axios.delete('http://127.0.0.1:8082/comment/deleteCommentById?id=' + item.id)
				.then((res) => {
				if (res.data.obj > 0) {
					this.message('删除成功', 'success')
					//初始化评论查询方法
					this.getCommentAllByTravesId()
				} else {
					this.message('删除失败', 'warning')
				}
				})
			})
			.catch(() => {
			this.$message({
				type: 'info',
				message: '已取消删除'
			})
			})
		},
		// 删除一级评论信息
		deleteComment (comment) {
			this.$confirm(
				'此操作将删除您的评论信息，是否继续操作？',
				'提示',
				{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				} // 删除提示框
			)
			.then(() => {
			axios.delete('http://127.0.0.1:8082/comment/deleteCommentById?id=' + comment.id)
				.then((res) => {
				if (res.data.obj > 0) {
					this.message('删除成功', 'success')
					//初始化评论查询方法
					this.getCommentAllByTravesId()
				} else {
					this.message('删除失败', 'warning')
				}
				})
			})
			.catch(() => {
			this.$message({
				type: 'info',
				message: '已取消删除'
			})
			})
		},
		// 根据游记id查询相关的评论信息
		getCommentAllByTravesId () {
			this.travelsId = this.id
			axios.get('http://127.0.0.1:8082/comment/getCommentAllByTravesId?travelsId=' +this.travelsId).then(res => {
				this.commentAllList = res.data.obj
				console.log(this.commentAllList)
				this.commentTotal - this.commentAllList.length
			})
		},
		// // 根据游记id全查评论信息
		// getCommentAllByTravesId () {
		// 	this.travelsId = this.id
		// 	axios.get('http://127.0.0.1:8082/comment/getCommentAllByTravesId?travelsId=' + this.travelsId, {
		// 		params: {
		// 		pageSize: this.page.pageSize,
		// 		pageNum: this.page.pageNum,
		// 		}
		// 	})
		// 	.then((res) => {
		// 		this.commentAllList = res.data.obj.content
		// 		this.page.total = res.data.obj.total
		// 	})
		// },
		//新增评论
		savaComment(){
			this.userName = window.sessionStorage.getItem('userName')
			this.travelId = window.sessionStorage.getItem('id')
			var formdata = new FormData()
			formdata.set('userName', this.userName)
			formdata.set('commentContent', this.commentList.commentContent)
			formdata.set('avatarId', this.userAvatarId)
			formdata.set('travelsId', this.id)
			formdata.set('userId', this.userId)
			formdata.set('travelsName', this.travelsTitle)
			axios.post('http://127.0.0.1:8082/comment/saveComment', formdata).then((res) => {
				if (res.data.obj > 0) {
					this.message('恭喜你，评论成功！', 'success')
					// 初始化评论查询方法
					this.getCommentAllByTravesId()
					this.commentList = {

					}
				} else {
					this.message('对不起，评论失败！', 'warning')
				}
			})
		},	
		// 点击时返回顶部
		toTop() {
			document.documentElement.scrollTop = 0;
		},
		//点击查看游记详情时修改浏览量
		updatetTourNote () {
			var formdata = new FormData()
			formdata.set('id', this.id)
			formdata.set('views',this.views)
			axios.put('http://127.0.0.1:8082/tourNote/updatetTourNote', formdata).then((res) => {})
		},
		//根据前页面id查询游记详细信息
		getToueNoteById(){
			this.id = this.$route.query.id
			this.$axios
			.get('http://127.0.0.1:8082/tourNote/getToueNoteById?id=' + this.id).then((res) => {
				this.travelDitailsData = res.data.obj
				this.coverId = this.travelDitailsData[0].coverId
				this.id = this.travelDitailsData[0].id
				this.travelsTitle = this.travelDitailsData[0].title
				this.views = this.travelDitailsData[0].views
				//点击查看游记详情时修改浏览量
				this.updatetTourNote()
			})
		},
		handleSelect (key, keyPath) {
			console.log(key, keyPath)
		},
		// 用于分页
		handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getCommentAllByTravesId()
		},
		// 用于分页
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getCommentAllByTravesId()
		},
		// 消息提示
		message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		},
		// 打开举报弹窗
		open() {
			this.$prompt('请输入您要举报的理由', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(({ value }) => {
				this.$message({
					type: 'success',
					message: '举报成功等待官方验证'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消举报'
				});       
			});
		},
	}
}
</script>

<style scoped>
.body{
	margin-top:140px;
}
#travelDitails{
	position: absolute;
}
#travelDitails-head{
    width: 100%;
    height: 60px;
    background-color: white;
}
.comment_detailsDiv{
	width: 1644px;
	height: 100%;
	background-color:rgb(247, 245, 245);
}
.el-menu-demo{
    width:1200px;
    margin:0 auto;
}
.travelDitails-herder{
	width:1360px;
	margin:0 auto;
	margin-top: 30px;
}
.treavelDitiails-aside{
	height: 100%;
	margin-left:300px;
	margin-top: 60px;
	border-bottom:1px solid gainsboro;
	padding-bottom: 60px;
}
.travelDitails_userDiv{
	position: absolute;
}
.travelDitails-richText{
	height:100%;
	width:960px;
	max-width: 100%;
}
.treavelDitiails-rightAside{
	 margin-left:22px;
	 margin-top: 60px;
	 height:750px;
	 border-left:1px solid gainsboro;
}
.travelDitails_UserCard{
	 width:240px;
	 margin-left:1040px;
	 height: 80px;
	 margin-top: -80px;
}
.travelDitails_Card{
	margin-top: 20px;
	margin-left: 40px;
	width:550px;
	height: 80px;
}
.travelDitails_UserDiv{
	background-color:rgba(255, 255, 255, 0.676);
	height: 100px;
	width: 1320px;
	margin-top: 300px;
	position: absolute;
}
.traveDitalis_UserFont{
	position: relative;
	left:20px;top:-20px;
}
.top {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 50px;
    right: 100px;
    background-color: aqua;
}
.travelDitails_image{
	
	width: 100%;
	height: 100%;
}
.comment_div{
	width: 1260px;
	height: 100%;
	margin-left: 190px;
	margin-top:90px;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px 3PX #dcdbdb;
	background-color: #eae8e8;
	box-shadow: 0px 0px 10px 10PX #888888;
}
.comment_publishDiv{
	width: 80%;
	border-bottom:1px solid gainsboro;
	padding-bottom: 90px;
	margin-left: 160px;
}
.comment_el_from_item{
	width: 950px;
	margin-top:-86px;
	margin-left: 10px;
}
.comment_imageDiv{
	width: 50px;
	height: 100px;
	margin-top: 20px;
}
.comment_commentImage{
	width: 60px;
	height: 60px;
	float: left;
}
.comment_image{
	width: 80px;
	height: 80px;
	border-radius: 100%;
}
.comment_images{
	width: 80px;
	height: 80px;
}
.block{
	text-align: center;
}
.comment_commentDiv{
	width: 100%;
	height:100%;
	margin-top:60px;
	margin-left: 160px;
}
.comment_span{
	width: 200px;
	margin-left: 24px;
	float: left;
}
.comment_deleteSpan:hover{
	cursor: pointer;
	color: #409EFF;
}
.comment_reportSpan{
	margin-top:70px;
	float:left;
	margin-left:100px;
	color: gainsboro;
}
.comment_replyReportSpan{
	margin-top: -14px;
	float:left;
	margin-left:730px;
	color: gainsboro;
}
.comment_publishSpan{
	margin-top:70px;
	float:left;
	margin-left:-600px
}
.comment_replyPublishSpan{
	float:left;
	margin-top:50px;
	margin-left:-600px;
	padding-bottom: 30px;
}
.comment_publishFont{
	float:left;
	margin-top:10px;
	color: rgb(149, 147, 147);
}
.comment_styleDiv{
	width: 600px;
	height: 40px;
	float: left;
	margin-top:40px;
	margin-left:-200px
}
.comment_replyStyleDiv{
	width: 600px;
	height: 40px;
	float: left;
	margin-left: -200px;
	margin-top: 20px;
}
.comment_replyDiv{
	width: 70%;
	height: 100%;
	float: left;
	margin-top:70px;
	margin-left:58px;
	border-bottom: 1px solid #d2d3d4;
}
.reply_div{
    position:fixed;
	height: 200px;
	width: 50.5%;
	background-color:rgba(126, 126, 126, 0.5);
	top:770px;
	margin-left: 340px;
}
.reply_h2{
	text-align: center;
	color: rgb(56, 55, 55);
}
.comment_h1{
	 font-size:25px;
	 text-align: center;
}
.travelDitails_endP{
	font-size: 34px;
	margin-top: 20px;
	color: rgb(208, 206, 206);
	text-align: center;
}
</style>
